<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{$route.meta.title}}</p></div>

  <div class="ivu-card-head">
    <Button type="info" @click="clickClearSearch">全部</Button>
    <Button type="success">添加用户</Button>
    <Select @on-change="onChangeSelectUserLevel" style="width:200px" placeholder="请选择用户等级">
      <Option v-for="(v, k) in apiConfig['user_level']" :value="k.toString()" :key="k">{{ v }}</Option>
    </Select>
    <ButtonGroup>
      <Button v-for="(v, k) in apiConfig['user_shop_level']" :key="k" @click="clickSearchShopLevel(k)" :type="modelsSearch.shop_level.toString()===k.toString()?'primary':'ghost'">{{ v }}</Button>
    </ButtonGroup>
  </div>

  <div class="ivu-card-body">
    <Table :data="modelsItmes" :columns="columns" show-header size="small">
      <div slot="header">
        <Row>
          <Col span="12">用户列表(总数: {{ modelsPager.totalItems }}, 本月新会员总数：{{ thisMonthCreateAccount }})</Col>
          <Col span="12">
            <Input placeholder="请输入用户编号" style="width: 50%" v-model="modelsSearch.user_code"/>
            <Button type="primary" icon="search" @click="clickSearchUserCode">搜索</Button>
          </Col>
        </Row>
      </div>
    </Table>
  </div>

  <div class="ivu-card-body"><Page :current="modelsPager.current" :total="modelsPager.totalItems" :page-size="modelsPager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>

<script>
import dayjs from 'dayjs';
import user from '@/api/user/index';
import config from '@/config/index';
import apiConfig from '@/api/config';

export default {
  data() {
    return {
      columns: [
        {title: '用户编号', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account.user_code);}},
        {title: '真实姓名', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account.real_name);}},
        {title: '用户状态', align: 'center', width: 100, render: (h, params) => { return h('span', this.apiConfig['user_status'][params.row.account.status]); }},
        {title: '用户等级', align: 'center', width: 100, render: (h, params) => { return h('span', this.apiConfig['user_level'][params.row.account.user_level]); }},
        {title: '店级别',   align: 'center', width: 100, render: (h, params) => { return h('span', this.apiConfig['user_shop_level'][params.row.account.shop_level]); }},
        {title: '货', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account_wallet.goods);}},
        {title: '报单币', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account_wallet.declaration_coin);}},
        {title: '旅游积分', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account_wallet.tourism_integration);}},
        {title: '购物券', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account_wallet.coupon);}},
        {title: '激活码', align: 'center', width: 100, render:(h, params) => { return h('span',params.row.account_wallet.activation_code);}},
        {title: '创建时间',align: 'center', width: 200, render: (h, params) => { return h('span', dayjs(params.row.account_info.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')); }},
        {title: '操作', align: 'center', render: (h, params) => {
          var _this = this;
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click() {
                  _this.$router.push({name: 'userUpdate', query: {'user_id': params.row.account.user_id}});
                }
              }
            }, '修改'),
            /*
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click() {
                  consle.log(params.row.account.user_id);
                }
              }
            }, '冻结'),
            */
            h('Button', {
              props: {
                type: 'success',
                size: 'small'
              },
              on: {
                click() {
                  window.open(config.ajaxApi + '/enter?id='+params.row.account.user_id+'&password='+params.row.account.password, '_blank');
                }
              }
            }, '查看'),
            h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              on: {
                click() {
                  _this.$router.push({name: 'userLayer', params: {'user_code': params.row.account.user_code}});
                }
              }
            }, '团队')
          ]);
        }}
      ],
      apiConfig: {},
      modelsSearch: {
        user_code: '',
        user_level: '',
        shop_level: ''
      },
      modelsItmes: [],
      modelsPager: {current: 1, totalItems: 0, 'limit': 10},
      thisMonthCreateAccount: 0
    };
  },
  methods: {
    clickClearSearch() {
      this.modelsSearch = {
        user_code: '',
        user_level: '',
        shop_level: ''
      };
      this.clickSearchUserCode();
    },
    onChangeSelectUserLevel(val) {
      this.modelsSearch.user_level = val;
      this.clickSearchUserCode();
    },
    clickSearchShopLevel(val) {
      this.modelsSearch.shop_level = val;
      this.clickSearchUserCode();
    },
    clickSearchUserCode() {
      this.onChangePage(1);
    },
    onChangePage(page) {
      this.modelsPager.current = page;
      this.getUsers();
    },
    getUsers() {
      let _this = this;

      user.pager(_this.modelsSearch, _this.modelsPager).then(function(res) {
        if(res !== false && res.models !== null && res.models !== undefined && res.models !== '') {
          _this.modelsItmes = res.models.items;
          _this.modelsPager.current = res.models.current;
          _this.modelsPager.totalItems = res.models.total_items;
          _this.modelsPager.limit = res.models.limit;
          _this.thisMonthCreateAccount = res.thisMonthCreateAccount
        }
      });
    }
  },
  mounted() {
    var _this = this;
    apiConfig.find().then(function(value) {
      _this.apiConfig = value;
      _this.getUsers();
    });
  }
}
</script>

<style>
.ivu-table-cell .ivu-btn {
  margin-right: 5px;
}
</style>